<template>
    <div class="address-add">
        <group title="信息填写">
            <x-input title="收货人" v-model="info.name" :max="13"></x-input>
            <x-input title="手机号码" v-model="info.phone" :max="11" is-type="china-mobile"></x-input>
            <cell title="所在区域" :value="info.address | addressFilter(list)" is-link
                  @click.native="popVisible = !popVisible"></cell>
            <x-input title="详细地址" placeholder="街道，楼牌号等" v-model="info.addressDetails"></x-input>
        </group>
        <div class="add-btn">
            <m-button value="添加" @click.native="addAddress"></m-button>
        </div>
        <m-pop type="middle" :visible="popVisible">
            <m-address-picker :addressList="list" @comfirm="selectedAddress"></m-address-picker>
        </m-pop>
    </div>
</template>

<script>
    import {Group, XInput, Cell} from "vux";

    export default {
        data() {
            return {
                info: {
                    name: "",
                    phone: "",
                    address: [],
                    addressDetails: "",
                    isDefault: false,
                    label: ""
                },
                popVisible: false,
                list: []
            };
        },
        components: {
            XInput,
            Group,
            Cell
        },
        filters: {
            addressFilter(val, list) {
                let arrTemp = [];
                val.forEach((value, index, array) => {
                    for (let val of list) {
                        if (val.value === value) {
                            arrTemp[index] = val.name;
                            break;
                        }
                    }
                })
                return arrTemp.join('/')
            }
        },
        methods: {
            selectedAddress(e) {
                this.popVisible = false;
                this.info.address = e;
            },
            getAddressList() {
                const self = this;
                this.$http.getAddressList().then(
                    res => {
                        if (res.success === true) {
                            res.data.forEach((value, index, array) => {
                                array[index].value = String(array[index].value);
                                array[index].parent = String(array[index].parent);
                            });
                            this.list = res.data;
                        }
                    },
                    error => {
                    }
                );
            },
            addAddress() {
                const self = this;
                const data = {
                    receiver: this.info.name,
                    phone: this.info.phone,
                    provinceId: this.info.address[0],
                    cityId: this.info.address[1],
                    areaId: this.info.address[2],
                    addressDetails: this.info.addressDetails,
                    isDefault: this.info.isDefault
                }
                this.$http.addUserAddress(data).then(res => {
                    if (res.success === true) {
                        self.$mToast('添加成功！');
                        self.back();
                    }
                }, error => {
                });
            }
        },
        created() {
            this.getAddressList();
        }
    };
</script>

<style lang="less" scoped>
    .address-add {
        .add-btn {
            margin: 30px auto 0px auto;
        }
    }
</style>


